<template>
  <div>
    <Header :left="true" leftText="返回" title="未完成任务详情" />
    <van-row style="margin-top:50px;"></van-row>
    <van-divider style="color:red;">{{ currentTaskType }}</van-divider>
    <v-table
      is-horizontal-resize
      style="width:100%;"
      :height="1540"
      :show-vertical-border="true"
      :columns="columns"
      :table-data="tableData"
      :row-click="rowClick"
      row-hover-color="#eee"
      row-click-color="#edf7ff"
    ></v-table>
  </div>
</template>
<script>
import {
  Icon,
  DropdownMenu,
  DropdownItem,
  Button,
  CellGroup,
  Cell,
  Field,
  Col,
  Row,
  Image as VanImage,
  Checkbox,
  Pagination,
  Search,
  Sticky,
  Toast,
  Dialog,
  Divider,
  Calendar,
} from 'vant'
Vue.use(Divider)
Vue.use(Calendar)
Vue.use(Field)
Vue.use(Col)
Vue.use(Row)
Vue.use(VanImage)
Vue.use(Dialog)
import { _httpClient } from '@/libs/api'
import F2 from '@antv/f2/lib/index-all'
import Header from '@/components/header.vue'
import { VTable } from 'vue-easytable'
import 'vue-easytable/libs/themes-base/index.css'
import { storage } from '@/libs/utils'
import { removeToken, getToken, setBaseApiFrefix, getBaseApiFrefix } from '@/libs/auth'
export default {
  components: {
    Button,
    Header,
    Icon,
    CellGroup,
    Cell,
    Field,
    Col,
    Row,
    Search,
    Sticky,
    DropdownMenu,
    DropdownItem,
    Divider,
    VTable,
    Dialog,
  },

  data() {
    return {
      currentTaskType: null,
      user: [],
      dpIndex: 0,
      valueStrTime: null, //开始时间查询条件
      valueEndTime: null, //结束时间查询条件
      tableData: [
        // { seqNum: '1', description: '质量部', equipName: '30', eqStatus: '20', department: '40', techTask: '50' },
        // { seq: '1', department: '工艺部', dayTask: '30', weekTask: '20', monthTask: '40', techTask: '50' },
        // { seq: '1', department: '生产部', dayTask: '30', weekTask: '20', monthTask: '40', techTask: '50' },
      ],

      pointColumns: [
        //点检表格列头
        //点检表格列头
        {
          field: 'seqNum',
          title: '序号',
          width: 50,
          titleAlign: 'center',
          columnAlign: 'center',
          isResize: true,
          titleCellClassName: 'title-cell-class-name-test',
        },
        {
          field: 'taskCode',
          title: '任务编码',
          width: 160,
          titleAlign: 'center',
          columnAlign: 'center',
          isResize: true,
          titleCellClassName: 'title-cell-class-name-test',
        },
        {
          field: 'equipName',
          title: '设备编码',
          width: 150,
          titleAlign: 'center',
          columnAlign: 'center',
          isResize: true,
          titleCellClassName: 'title-cell-class-name-test',
        },
        {
          field: 'equipDesc',
          title: '设备名称',
          width: 200,
          titleAlign: 'center',
          columnAlign: 'center',
          isResize: true,
          titleCellClassName: 'title-cell-class-name-test',
        },
        {
          field: 'cycle',
          title: '周期(H)',
          width: 100,
          titleAlign: 'center',
          columnAlign: 'center',
          titleCellClassName: 'title-cell-class-name-test',
          isResize: true,
        },
        {
          field: 'eqStatus',
          title: '设备状态',
          width: 100,
          titleAlign: 'center',
          columnAlign: 'center',
          titleCellClassName: 'title-cell-class-name-test',
          isResize: true,
        },
        {
          field: 'taskCategory',
          title: '任务类型',
          width: 100,
          titleAlign: 'center',
          columnAlign: 'center',
          titleCellClassName: 'title-cell-class-name-test',
          isResize: true,
        },

        {
          field: 'createTime',
          title: '任务生成时间',
          width: 190,
          titleAlign: 'center',
          columnAlign: 'center',
          titleCellClassName: 'title-cell-class-name-test',
          isResize: true,
        },
        {
          field: 'description',
          title: '工厂',
          width: 90,
          titleAlign: 'center',
          columnAlign: 'center',
          isResize: true,
          titleCellClassName: 'title-cell-class-name-test',
        },

        {
          field: 'taskType',
          title: '任务状态',
          width: 100,
          titleAlign: 'center',
          columnAlign: 'center',
          titleCellClassName: 'title-cell-class-name-test',
          isResize: true,
        },
        {
          field: 'department',
          title: '部门',
          width: 100,
          titleAlign: 'center',
          columnAlign: 'center',
          isResize: true,
          titleCellClassName: 'title-cell-class-name-test',
        },
      ],

      pointColumns2: [
        //工艺点检表头
        {
          field: 'seqNum',
          title: '序号',
          width: 50,
          titleAlign: 'center',
          columnAlign: 'center',
          isResize: true,
          titleCellClassName: 'title-cell-class-name-test',
        },
        {
          field: 'department',
          title: '车间',
          width: 100,
          titleAlign: 'center',
          columnAlign: 'center',
          isResize: true,
          titleCellClassName: 'title-cell-class-name-test',
        },
        {
          field: 'equipName',
          title: '设备编码',
          width: 150,
          titleAlign: 'center',
          columnAlign: 'center',
          isResize: true,
          titleCellClassName: 'title-cell-class-name-test',
        },
         {
          field: 'equipDesc',
          title: '设备名称',
          width: 150,
          titleAlign: 'center',
          columnAlign: 'center',
          isResize: true,
          titleCellClassName: 'title-cell-class-name-test',
        },
        {
          field: 'eqStatus',
          title: '设备状态',
          width: 100,
          titleAlign: 'center',
          columnAlign: 'center',
          titleCellClassName: 'title-cell-class-name-test',
          isResize: true,
        },
        {
          field: 'description',
          title: '工厂',
          width: 90,
          titleAlign: 'center',
          columnAlign: 'center',
          isResize: true,
          titleCellClassName: 'title-cell-class-name-test',
        },
      ],
      columns: [],
      sites: [], //工厂
      departments: [], //部门
      taskTypes: [
        { value: 0, text: '点检' },
        { value: 1, text: '维修' },
      ], //任务类型
      data1: [], //饼图数据
      data: [],
    }
  },
  created: function() {
    let oldHight = api.winWidth
    this.screenWidth = oldHight
    //获取当前系统登录用户
    this.user = JSON.parse(storage.get('user'))
    //初始化设置弹窗高度
    // this.autoHeight.height = '100px'

    this.siteKey = api.pageParam.siteKey

    this.valueStrTime = api.pageParam.valueStrTime
    this.valueEndTime = api.pageParam.valueEndTime

    let taskType1 = api.pageParam.taskType
    this.currentTaskType = taskType1
    this.columns = this.pointColumns
    if (taskType1 === '日任务') {
      this.taskType = 0
    } else if (taskType1 === '周任务') {
      this.taskType = 1
    } else if (taskType1 === '月任务') {
      this.taskType = 2
    } else if (taskType1 === '工艺点检') {
      this.taskType = 3
      //表格列头初始化
      this.columns = this.pointColumns2
    } else {
      this.taskType = null
    }

    this.department = api.pageParam.department
    this.type = api.pageParam.type
    // alert(this.taskType)
    this.quertPointCheckTableList()
  },
  mounted: function() {
    //数据查询
    // this.queryPointCheckData()
  },

  methods: {
    //表格点击监听
    rowClick(rowIndex, columnName, rowData) {
      let isCanEdit = false
      if (columnName.executer != null && this.user.userName == columnName.executer) {
        isCanEdit = true
      } else {
        isCanEdit = false
      }
      //查询点检项相关信息
      this.queryNoEditTask({
        body: {
          taskCode: columnName.taskCode,
          siteKey: columnName.siteKey,
          eqStatus: columnName.eqStatusNum,
          taskType: columnName.taskTypeNum,
          equipCode: columnName.equipName,
        },
      })
    },

    async queryNoEditTask(data) {
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: '请稍等...',
      })
      let that = this
      try {
        let res = await _httpClient.post(_httpClient.getApiPrefix() + '/equip/check/isExist', data)
        Toast.clear()
        if (res.code === 200) {
          if (res.taskItemList) {
            //跳转到点检页面
            this.$ac.openWin({
              name: 'finish_check_no_edit',
              url: './report-finish_check_no_edit.html',
              pageParam: {
                equipCode: data.body.equipCode,
                taskItemList: res.taskItemList,
                taskFileList: res.taskFileList,
                isCanEdit: false,
              },
            })
          }
        } else {
          Toast.fail(res.msg)
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e))
      }
    },

    //时间确认查询
    timeConfirm() {
      if (this.taskTypeIndex == 0) {
        //重新查询数据
        this.queryPointCheckData()
      } else {
        //重新查询数据
        this.quertRepairInfoList()
      }
    },
    //查询点检任务数据
    queryPointCheckData() {
      this.quertPointCheckList()
      this.quertPointCheckTableList()
    },

    //查询点检表格数据
    async quertPointCheckTableList() {
      let _this = this

      try {
        let res = await _httpClient.post(_httpClient.getApiPrefix() + '/app/report/queryList', {
          body: {
            siteKey: _this.siteKey,
            department: _this.department,
            taskType: _this.taskType,
            type: 1,
            startTime: _this.valueStrTime,
            endTime: _this.valueEndTime,
          },
        })
        if (res.code === 200) {
          _this.tableData = res.rows
        } else {
          alert(res.msg)
        }
      } catch (e) {
        alert(JSON.stringify(e))
      }
    },

    //查询维修任务信息
    async quertRepairInfoList() {
      let _this = this
      //部门
      let department
      if (_this.departments.length != 0 && _this.departments[_this.departIndex].value != 0) {
        department = _this.departments[_this.departIndex].text
      }
      //工厂
      let site
      if (_this.sites.length != 0) {
        site = _this.siteIndex
      }

      try {
        let res = await _httpClient.post(_httpClient.getApiPrefix() + '/app/report/repairList', {
          body: {
            siteKey: site,
            department: department,
            startTime: _this.valueStr,
            endTime: _this.valueEnd,
            type: 1,
            startTime: _this.valueStrTime,
            endTime: _this.valueEndTime,
          },
        })
        if (res.code === 200) {
          _this.data = res.rows
          _this.tableData = res.rows
          //调用方法绘制柱形图
          _this.drawChart()
        } else {
          alert(res.msg)
        }
      } catch (e) {
        alert(JSON.stringify(e))
      }
    },

    //日期格式化
    formatDate(date) {
      let year = date.getFullYear()
      let mouth = date.getMonth() + 1
      if (mouth < 10) {
        mouth = '0' + mouth
      }
      let day = date.getDate()
      if (day < 10) {
        day = '0' + day
      }
      return year + '-' + mouth + '-' + day
    },

    //时间清空
    clearTime() {
      this.valueStr = ''
      this.valueEnd = ''
      if (this.taskTypeIndex == 0) {
        //重新查询数据
        this.queryPointCheckData()
      } else {
        //重新查询数据
        this.quertRepairInfoList()
      }
    },

    //开始时间取消
    startConcel() {
      // this.valueStr = ''
      this.autoHeight.height = '100px'
    },
    //结束时间取消
    endConcel() {
      // this.valueEnd = ''
      this.autoHeight.height = '100px'
    },

    //打开开始时间选择
    openStartTime() {
      this.showCalendarStr = true
      this.autoHeight.height = '400px'
    },

    //打开结束时间选择
    openEndTime() {
      this.showCalendarEnd = true
      this.autoHeight.height = '400px'
    },

    //开始时间确定
    onConfirmStr(date) {
      this.valueStr = this.formatDate(date)
      this.showCalendarStr = false
      this.autoHeight.height = '100px'
    },
    //结束时间确认
    onConfirmEnd(date) {
      this.valueEnd = this.formatDate(date)
      this.showCalendarEnd = false
      this.autoHeight.height = '100px'
    },
    //绘制柱状图
    drawChart() {
      var Shape = F2.Shape
      var Util = F2.Util
      Shape.registerShape('interval', 'text', {
        draw: function draw(cfg, container) {
          var points = this.parsePoints(cfg.points)
          var style = Util.mix(
            {
              fill: cfg.color,
              z: true, // 需要闭合
            },
            cfg.style
          )
          var intervalShape = container.addShape('rect', {
            attrs: Util.mix(
              {
                x: points[1].x,
                y: points[1].y,
                width: points[2].x - points[1].x,
                height: points[0].y - points[1].y,
              },
              style
            ),
          })

          var origin = cfg.origin._origin // 获取对应的原始数据记录
          var textShape = container.addShape('text', {
            zIndex: 1,
            attrs: {
              x: (points[1].x + points[2].x) / 2,
              y: points[1].y - 5, // 往上偏移 5 像素
              text: origin['taskNum'],
              fill: '#808080',
              textAlign: 'center',
              textBaseline: 'bottom',
              fontSize: 10, // 字体大小
            },
          })
          container.sort()
          return [intervalShape, textShape]
        },
      })

      var chart = new F2.Chart({
        id: 'mountNode',
        pixelRatio: window.devicePixelRatio,
      })
      chart.source(this.data)
      chart.legend(true)
      chart.legend({
        align: 'center',
        itemWidth: null, // 图例项按照实际宽度渲染
      })
      chart.tooltip({
        showItemMarker: false,
        onShow: function onShow(ev) {
          var items = ev.items
          // alert(11111)
          alert(JSON.stringify(items))
        },
      })
      chart
        .interval()
        .position('department*taskNum')
        .color('taskType')
        .shape('text')
        .adjust({
          type: 'dodge',
          marginRatio: 0.2,
        })
        .style({
          radius: [4, 4, 0, 0],
        })

      chart.render()
    },
  },
}
</script>
<style>
body {
  background-color: White;
}
.selectdTextScroll {
  display: inline-block;
  /* position: fixed; */
  top: 9rem;
  overflow: scroll;
  right: 0;
  width: 100%;
  height: 600px;
  z-index: 1;
}
.title-cell-class-name-test {
  background-color: #778899;
  color: #fff;
}
</style>
